import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

function Pie ({data}) {

  const { company, area, planProduction, averageRevenue, planProfits, perCapitaProfit, plannedCost, perCapitaCost,
     workersIncrease, perCustomerService, actualPaymentRate, receivableAccount, qualityControlPoints, fromSingular,
     signBillAmount, websitePromotion, integralAccumulated, accumulativeRankings, } = data[10] || {};

  const pie = {
    title : {
        text: '分支机构管理能力指标及积分数据',
        x:'center'
    },
    color: ['#cb5738','#6fbb60', '#61a0a8', '#4ed1d5', '#6b76dd','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // legend: {
    //     x : 'center',
    //     y : 'bottom',
    //     data:['计划产值完成率','人均营收','计划利润完成率','人均利润','计划成本完成比','人均成本','增减员','人均客服量',
    //           '实际到款率','应收账款占营收比','质控分','撤单数','签单量','网站推广','积分累计','累计排名',
    //          ]
    // },
    // toolbox: {
    //     show : true,
    //     feature : {
    //         mark : {show: true},
    //         dataView : {show: true, readOnly: false},
    //         magicType : {
    //             show: true,
    //             type: ['pie', 'funnel']
    //         },
    //         restore : {show: true},
    //         saveAsImage : {show: true}
    //     }
    // },
    calculable : true,
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [20, 110],
            center : ['25%', '50%'],
            roseType : 'radius',
            // label: {
            //     normal: {
            //         show: false
            //     },
            //     emphasis: {
            //         show: true
            //     }
            // },
            // lableLine: {
            //     normal: {
            //         show: false
            //     },
            //     emphasis: {
            //         show: true
            //     }
            // },
            data:[
                {value:planProduction, name:'计划产值完成率'},
                {value:averageRevenue, name:'人均营收'},
                {value:planProfits, name:'计划利润完成率'},
                {value:perCapitaProfit, name:'人均利润'},
                {value:plannedCost, name:'计划成本完成比'},
                {value:perCapitaCost, name:'人均成本'},
                {value:workersIncrease, name:'增减员'},
                {value:perCustomerService, name:'人均客服量'},
                {value:actualPaymentRate, name:'实际到款率'},
                {value:receivableAccount, name:'应收账款占营收比'},
                {value:qualityControlPoints, name:'质控分'},
                {value:fromSingular, name:'撤单数'},
                {value:signBillAmount, name:'签单量'},
                {value:websitePromotion, name:'网站推广'},
                {value:integralAccumulated, name:'积分累计'},
                {value:accumulativeRankings, name:'累计排名'},
            ]
        },
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['75%', '50%'],
            roseType : 'area',
            data:[
              {value:planProduction, name:'计划产值完成率'},
              {value:averageRevenue, name:'人均营收'},
              {value:planProfits, name:'计划利润完成率'},
              {value:perCapitaProfit, name:'人均利润'},
              {value:plannedCost, name:'计划成本完成比'},
              {value:perCapitaCost, name:'人均成本'},
              {value:workersIncrease, name:'增减员'},
              {value:perCustomerService, name:'人均客服量'},
              {value:actualPaymentRate, name:'实际到款率'},
              {value:receivableAccount, name:'应收账款占营收比'},
              {value:qualityControlPoints, name:'质控分'},
              {value:fromSingular, name:'撤单数'},
              {value:signBillAmount, name:'签单量'},
              {value:websitePromotion, name:'网站推广'},
              {value:integralAccumulated, name:'积分累计'},
              {value:accumulativeRankings, name:'累计排名'},
            ]
        }
    ]
  };
  return (
        <ReactEcharts
          option={pie}
          style={{height: '50vh', width: '100%'}}
        />
  )
}

export default Pie;
